<!--
 * @Description: 营销数据分析
 * @Author: shenmengfei
 * @Date: 2023-05-26 09:00:00
-->
<template>
  <div class="page-wrap">
    <NormalForm pageTitle="营销数据分析" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card mt16 table-card">
      <el-table ref="tableRef" :data="tableData" v-loading="tableLoading" height="calc(100% - 55px)"
        :row-style="{ height: '40px' }" row-key="journeyConfigId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :expand-row-keys="expandsList">
        <el-table-column prop="rank" label="排名" width="60"></el-table-column>
        <el-table-column prop="flowName" label="旅程名称" align="center"></el-table-column>
        <el-table-column prop="triggerId" label="旅程触发条件" align="center"></el-table-column>
        <el-table-column prop="taskNum" label="任务总数" align="center"></el-table-column>
        <el-table-column prop="materialType" label="素材类型" align="center">
          <template slot-scope="scope">
            <div>{{ sourceOpt[scope.row.materialType] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="reachType" label="触达形式" align="center">
          <template slot-scope="scope">
            <div>{{ shapeOpt[scope.row.reachType] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sendTimes" label="发送次数" align="center"></el-table-column>
        <el-table-column prop="pv" label="点击次数（PV）" align="center"></el-table-column>
        <el-table-column prop="uv" label="点击人数（UV）" align="center"></el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
  </div>
</template>

<script>
import { getMarketAnalysisList } from '@/api/operate/automarket'
import {
  getUserJourney,
} from '@/api/operate/automarket'

export default {
  data() {
    return {
      queryForm: {
        flowName: '',
        triggerId: '',
        reachType: '',
        materialType: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          // label: '旅程名称',
          // value: '',
          // prop: 'flowName',
          // type: 'INPUT',
          // emunName: ''
          label: '用户旅程阶段',
          value: '',
          prop: 'journeyId',
          type: 'SELECT',
          emunName: 'journeyList'
        },
        {
          label: '旅程触发条件',
          value: '',
          prop: 'triggerId',
          type: 'SELECT',
          emunName: 'conditionList'
        },
        {
          label: '素材类型',
          value: '',
          prop: 'materialType',
          type: 'SELECT',
          emunName: 'sourceList'
        },
        {
          label: '触达形式',
          value: '',
          prop: 'reachType',
          type: 'SELECT',
          emunName: 'shapeList'
        },
      ],
      enumOpt: {
        conditionList: [],
        journeyList: [],
        shapeList: [
          { dictLabel: '消息', dictValue: '1' },
          { dictLabel: '朋友圈', dictValue: '2' },
        ],
        sourceList: [],
      },
      shapeOpt: { 1: '消息', 2: '朋友圈', },
      sourceOpt: {},
      tableData: [],
      expandsList: [],
      tableLoading: false,
      isShowExpand: false,
      total: 0,
    }
  },
  created() {
    this.init();
    getUserJourney().then((res) => {
      res.data.forEach(item => {
        this.enumOpt.journeyList.push({ dictLabel: item.flowName, dictValue: item.flowId })
      })
    })
  },
  methods: {
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getMarketAnalysisListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getMarketAnalysisListFn()
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getMarketAnalysisListFn()
    },
    getMarketAnalysisListFn() {
      this.tableLoading = true
      getMarketAnalysisList(this.queryForm).then((res) => {
        this.expandsList = []
        this.closeExpandRow(this.tableData, false)
        if (res.code === 200) {
          this.tableData = [];
          if (res.data.list.length > 0) {
            res.data.list.forEach(item => {
              let temp = {}
              for (let key in item) {
                if (key == 'scrmMarInfoList') {
                  temp.children = item[key]
                } else {
                  temp[key] = item[key]
                }
              }
              this.tableData.push(temp)
            })
          }
          this.total = res.data?.total || 0
          this.tableLoading = false
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 关闭所有展开行
    closeExpandRow(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.tableRef.toggleRowExpansion(item, isExpansion);
      });
    },
    handleReset() {
      this.queryForm = {
        flowName: '',
        triggerId: '',
        reachType: '',
        materialType: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getMarketAnalysisListFn()
    },
    init() {
      // 触发条件
      this.getDicts("journey_trigger_id").then((res) => {
        if (res.code === 200) {
          this.enumOpt.conditionList = res.data;
        }
      });
      this.getDicts("material_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.sourceList = res.data;
          res.data.forEach(item => {
            this.sourceOpt[item.dictValue] = item.dictLabel;
          });
        }
      });
      // this.handleQuery();
    },
  },
}
</script>

<style lang='scss' scoped>
@import '@/styles/base.scss';

.page-wrap {
  height: 100%;

  .table-card {
    padding: 20px;
    height: calc(100% - 174px);

    ::v-deep.el-table .cell {
      padding: 0;
    }
  }
}</style>
